<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>京东列表页手风琴效果</title>
<link rel="stylesheet" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//文档加载完毕之后执行里面的代码
		$('.itemHeader').click(function(){
			//给div块绑定click事件
			if($(this).parents('.item').find('ul').is(':visible')){
				//判断当前点击的对象下面的二级菜单是否显示，如果显示，让它隐藏，如果隐藏，让它显示
				$(this).parents('.item').find('ul').hide(400);
				//隐藏当前点击的对象下面的二级菜单
				$(this).parents('.item').removeClass('active');
			}else{	
				$(this).parents('.item').find('ul').show(400);
				//显示当前点击的对象下面的二级菜单
				$(this).parents('.item').addClass('active');
				$(this).parents('.item').siblings().find('ul').hide(400);
				$(this).parents('.item').siblings().removeClass('active');
			}
		})
	})
</script>
</head>
<body>
	<div id="box">
		<div class="item">
			<div class="itemHeader">
				<b></b><i>灯饰照明</i>
			</div>
			<ul>
				<li><a href="javascript:;">吸顶灯</a>
				</li>
				<li><a href="javascript:;">吊灯</a>
				</li>
				<li><a href="javascript:;">装饰灯</a>
				</li>
				<li><a href="javascript:;">后盾网视频</a>
				</li>
			</ul>
		</div>
		<div class="item">
			<div class="itemHeader">
				<b></b><i>厨房卫浴</i>
			</div>
			<ul>
				<li><a href="javascript:;">厨卫五金/挂件</a>
				</li>
				<li><a href="javascript:;">水槽</a>
				</li>
				<li><a href="javascript:;">龙头</a>
				</li>
				<li><a href="javascript:;">后盾网视频</a>
				</li>
			</ul>
		</div>
		<div class="item">
			<div class="itemHeader">
				<b></b><i>五金工具</i>
			</div>
			<ul>
				<li><a href="javascript:;">手动工具</a>
				</li>
				<li><a href="javascript:;">电动工具</a>
				</li>
				<li><a href="javascript:;">工具箱/包/车</a>
				</li>
				<li><a href="javascript:;">后盾网视频</a>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>